
$(document).ready(function($) {
	$("#fechaInicio").datepicker($.datepicker.regional["es"]);
	$("#fechaFin").datepicker($.datepicker.regional["es"]);
});

function dibujarGrafico(fechaInicio, fechaFin, objetivoId, caloriasDiarias) {
	
	$.ajax({
		url: '/paciente/automaticObjective/cargarGrafico?' + "fechaInicio=" + fechaInicio + "&fechaFin=" + fechaFin + "&objetivoId=" + objetivoId,
		async: false,
		success: function(data) {
			
			var caloriasConsumidas = JSON.parse(data);
			var caloriasPromedio = [[0, caloriasDiarias], [caloriasConsumidas.length, caloriasDiarias]];
			
			$('#sparkline_data').html("Promedio: " + caloriasPromedio + " / Consumidas: " + data);
			$('#sparkline_data').hide();
			
			$.plot($("#sparkline"), [
					{
						data: caloriasConsumidas,
						label: "Calorías Consumidas (+)",
						color: "#E75059",
						threshold: { below: caloriasDiarias, color: "#BBD884" },
						lines: { show: true, lineWidth: 3 /*, steps:true*/}
					},
					{
						data: [],
						label: "Calorías Consumidas (-)",
						color: "#BBD884",
						lines: { show: true}
					},
					{
						data: caloriasPromedio,
						label: "Calorías Deseadas",
						color: "#AAAAAA",
			            points: { show: true },
						lines: { show: true, lineWidth: 5}
					},
				],
				{
					yaxis: {min: caloriasDiarias - 500, max: caloriasDiarias + 500},
					grid: {
			            backgroundColor: { colors: ["#ffffff", "#eeeeee"] }
			        }
		        }
			);
		}
	});
}

function verEstadisticas(fechaInicio, fechaFin, objetivoId, caloriasDiarias) {
	
	$( "#estadisticas" ).dialog( {
		resizable: true,
		autoOpen: false,
		width: 550,
		height: 550,
		modal: true,
		title: "Estadísticas",
		buttons: {
			"Recargar":
				function() {
					dibujarGrafico($("#fechaInicio").val(), $("#fechaFin").val(), objetivoId, caloriasDiarias);
				}
		}
	});
	
	$( "#estadisticas" ).dialog( "open" );
	
	$("#fechaInicio").val(fechaInicio);
	$("#fechaFin").val(fechaFin);

	dibujarGrafico($("#fechaInicio").val(), $("#fechaFin").val(), objetivoId, caloriasDiarias);
	
}
